<template>
  <div class="home">
    <div class="header">
      <div class="top_bj"></div>
      <div class="top_img">
        <img src="@/assets/img/top.png" alt="">
        <img src="@/assets/img/titleTop.png" alt="">
      </div>
    </div>
    <div class="container">
      <div class="cont_left">
        <!-- 模块1 -->
        <Overview v-show='assemblyFlg' />
        <HouseInfo v-show='!assemblyFlg' ref="changeIdChild_houseInfo" />
        <Maintain v-if='assemblyFlg' ref="changeIdChild_maintain" />
        <MaintaInInfo v-if='!assemblyFlg' ref="changeIdChild_maintainInfo" />
        <Warning @more4="more" ref="changeIdChild_warming" />
      </div>
      <div class="cont_center">
        <div class="return" v-show="!assemblyFlg" @click="returnHouse">
          <i class="el-icon-back"></i>
        </div>
        <div class="center_info">
          <div class="item">
            <img src="@/assets/img/jrgs.png" alt="">
            <div class="item_text">
              <h2>日供水量</h2>
              <h3>{{ this.data.waterCnt }}m³</h3>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/jrydl.png" alt="">
            <div class="item_text">
              <h2>日耗电量</h2>
              <h3>{{ this.data.elecCnt }}kW.h</h3>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/pj.png" alt="">
            <div class="item_text">
              <h2>每吨水耗电量</h2>
              <h3>{{ this.data.per }}kW.h/m³</h3>
            </div>
          </div>
        </div>
        <div class="videoBox">
          <div class="iframe_cont">
            <iframe class="pump_map" v-show="assemblyFlg"
              src="https://www.thingjs.com/s/8ec709d69f60e6ae1dbe6ea9?params=105b0f77fd24654d4eebc434e9"
              frameborder="0"></iframe>
            <iframe class="pumpInfo_map" v-show="!assemblyFlg" src="" frameborder="0"></iframe>
          </div>
        </div>
        <House v-show='assemblyFlg' @onChange="changeInfo" ref="changeIdChild_house" />
        <Working v-show='!assemblyFlg' :msg="assemblyFlg" ref="child" />
      </div>
      <div class="cont_right">
        <Loss ref="changeIdChild_loss" :objId='objId' @more2="more" />
        <Monitor ref="changeIdChild_monitor" @more3="more" />
        <VideoMonitor ref="changeIdChild_videoMonitor" />
      </div>
    </div>
    <Statistics v-if="alertFlg" @close="getClose" ref="changeIdChild_statistics" />
  </div>
</template>

<script>

import * as api from '@/assets/utils/api.js'
import Overview from '@/views/Home/overview.vue'
import Maintain from '@/views/Home/maintain.vue'
import Warning from '@/views/Home/warning.vue'
import House from '@/views/Home/house.vue'
import Loss from '@/views/Home/loss.vue'
import Monitor from '@/views/Home/monitor.vue'
import VideoMonitor from '@/views/Home/videoMonitor.vue'
import MaintaInInfo from '@/views/HomeInfo/maintainInfo.vue'
import Working from '@/views/HomeInfo/working.vue'
import HouseInfo from '@/views/HomeInfo/houseInfo.vue'
import Statistics from '@/views/ReportStatistics/statistics.vue'

export default {
  name: 'Home',
  components: {
    Overview,
    Maintain,
    Warning,
    House,
    Loss,
    Monitor,
    VideoMonitor,
    MaintaInInfo,
    Working,
    HouseInfo,
    Statistics
  },
  data() {
    return {
      data: [],
      assemblyFlg: true,
      room_charts: [],
      objId: {},
      clickFlg: '',
      click_site_no: '',
      alertFlg: false
    }
  },
  async created() {
    // const resParameter = await api.house({ tenantid: 1128 })
    // this.objId = {
    //   id: resParameter.data[0].id,
    //   site_no: resParameter.data[0].site_no
    // }
    // 接口参数
    setInterval(async () => {
      const id = { tenantid: 1128, siteId: 1 }
      const res = await api.nowInfo(id)
      this.data = res.data
    }, 3000)

    let pumpId, flags

    window.addEventListener('message', async (dt) => {
      const id = { tenantid: 1128 }
      const res = await api.house(id)
      if (dt.data?.msg == 'get_map_data') {
        document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'set_map_data', data: res.data }, 'https://www.thingjs.com')
      }

      if (dt.data?.msg == 'focus_building') {
        // console.log('单击')
        // console.log(dt.data.id)
        // this.changeId = dt.data.id
        this.clickFlg = dt.data.id
        pumpId = dt.data.id
        const id2 = { tenantid: 1128, siteId: dt.data.id }
        const res2 = await api.house(id2)
        this.click_site_no = res2.data[0].site_no
        // console.log(dt.data.id)
        this.$nextTick(() => {
          this.$refs.changeIdChild_maintain.changeData(dt.data.id)
          this.$refs.changeIdChild_loss.changeData(dt.data.id, res2.data[0].site_no)
          this.$refs.changeIdChild_monitor.changeData(dt.data.id, res2.data[0].site_no)
          this.$refs.changeIdChild_house.changeData(dt.data.id, res2.data[0].site_no)
          this.$refs.changeIdChild_warming.changeData(dt.data.id)
          this.$refs.changeIdChild_houseInfo.changeData(dt.data.id)
        })
      }
      // let PUMP
      if (dt.data?.msg == 'jump_building') {
        pumpId = dt.data.id
        this.clickFlg = dt.data.id
        // console.log(dt.data.id)
        // this.$refs.changeIdChild_statistics.changeData(dt.data.id)
        const id2 = { tenantid: 1128, siteId: dt.data.id }
        const res2 = await api.house(id2)
        this.click_site_no = res2.data[0].site_no
        this.$nextTick(() => {
          this.$refs.changeIdChild_loss.changeData(dt.data.id, res2.data[0].site_no)
          this.$refs.changeIdChild_monitor.changeData(dt.data.id, res2.data[0].site_no)
          this.$refs.changeIdChild_videoMonitor.changeSiteId(dt.data.id)
        })
        this.assemblyFlg = !this.assemblyFlg
        document.querySelector('.pumpInfo_map').src = 'https://www.thingjs.com/s/4174f591afd78470459de610?params=105b0f77fd24654d4eebc434e9&rand=' + Math.random()
        document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'stop_auto_play' }, 'https://www.thingjs.com')
      }
      if (dt.data?.msg == 'show_pump_room_charts') {
        const id = { tenantid: 1128, siteId: pumpId }
        const res = await api.deviceInfo(id)
        flags = dt.data.flag
        // console.log(res.data,res.data[flags-1],flags-1)
        this.room_charts = res.data[flags - 1]
        this.$nextTick(() => {
          this.$refs.child.printAge(res.data[flags - 1], true)
        })
      }

      if (dt.data?.msg == 'get_pump_room_data') {
        const id = { tenantid: 1128, siteId: pumpId }
        const res = await api.deviceInfo(id)
        res.data.forEach((item, i) => {
          item.flag = i
        })
        document.querySelector('.pumpInfo_map').contentWindow.postMessage({ msg: 'set_pump_room_data', data: res.data }, 'https://www.thingjs.com')
        // document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'stop_auto_play'}, 'https://www.thingjs.com')
        this.$nextTick(() => {
          this.$refs.child.printAge(res.data[1])
        })
      }


      // if(dt.data?.msg == 'jump_building'){
      //   console.log('双击')
      //   this.assemblyFlg = !this.assemblyFlg
      // }
    })

  },
  mounted() {
  },
  methods: {
    // 弹窗的显示位置
    more(value) {
      this.alertFlg = true
      setTimeout(() => {
        this.$refs.changeIdChild_statistics.moreIndexData(value)
      }, 100)
    },
    getClose(value) {
      this.alertFlg = value
    },
    returnHouse() {
      this.$refs.changeIdChild_loss.changeData(this.clickFlg, this.click_site_no)
      this.$refs.changeIdChild_monitor.changeData(this.clickFlg, this.click_site_no)
      this.$refs.changeIdChild_videoMonitor.getcamera()
      this.assemblyFlg = !this.assemblyFlg
      document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'restart_auto_play' }, 'https://www.thingjs.com')
    },
    changeInfo(switchFlg) {
      this.$refs.changeIdChild_videoMonitor.changeSiteId(this.clickFlg)
      if (this.clickFlg) {
        this.assemblyFlg = switchFlg
        document.querySelector('.pumpInfo_map').src = 'https://www.thingjs.com/s/4174f591afd78470459de610?params=105b0f77fd24654d4eebc434e9&rand=' + Math.random()
        document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'stop_auto_play' }, 'https://www.thingjs.com')
      }
    },
    // closeInfo(switchFlg) {
    //   this.assemblyFlg = switchFlg
    // }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #031a44;
  // background: url(@/assets/img/bg1.png) no-repeat center;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // opacity: 0.8;
  .header {
    width: 100%;
    height: 8%;
    position: relative;
    z-index: 1;
    background: url(@/assets/img/topTitle.png) no-repeat center;
    background-size: 100% 100%;

    .top_bj {
      width: 100%;
      height: 48%;
      // background: linear-gradient(90deg, #061444 0%, #588FFB 50%, #061446 100%);
      // opacity: 0.1;
    }

    .top_img {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);

        &:nth-child(1) {
          width: 5.6rem;
          margin-top: -0.05rem;
        }
        &:nth-child(2) {
          width: 4.2rem;
          margin-top: 0.07rem;
        }
      }
    }
  }

  .container {
    // width: 100%;
    // height: 95%;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
    position: relative;
    top: -20px;
    height: 92%;

    .cont_left {
      width: 25.5%;
      height: 100%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .cont_center {
      width: 47%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      .return {
        position: absolute;
        right: 2%;
        top: 0;
        display: flex;
        cursor: pointer;
        z-index: 100;

        i {
          font-size: 0.5rem;
          color: #fff;
        }
      }

      .center_info {
        height: 12%;
        padding: 0 .62rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
        pointer-events: none;

        .item {
          width: 28%;
          display: flex;
          padding-top: .35rem;

          img {
            width: 30%;
            height: 100%;
            // padding: 9px 19px 0 11px;
          }

          .item_text {
            h2 {
              font-size: 0.18rem;
              color: #fff;
              padding: 0.2rem 0 0.05rem 0;
            }

            h3 {
              font-size: 0.25rem;
              font-family: 'arial';
              font-weight: bold;
              color: #46EDE8;
            }
          }

          &:nth-child(1) {
            img {
              padding: 3px 16px 0 8px;
            }
          }

          &:nth-child(2) {
            h3 {
              color: #46A0FF;
            }

            img {
              padding: 4px 19px 0 0;
            }
          }

          &:nth-child(3) {
            img {
              padding: 4px 13px 0 0;
            }

            h3 {
              color: #45FF82;
            }
          }
        }
      }

      .videoBox {
        width: 100%;
        height: 46.9%;

        .iframe_cont {
          width: 100%;
          height: 100%;

          iframe {
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            // z-index: 100;
          }
        }
      }

      .house {}
    }

    .cont_right {
      width: 25.5%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
